<template>
  <div class='container'>
    <el-dialog title="题目预览" :visible.sync="showDialog" @close="close" @open="open" >
        <el-row>
          <el-col :span="6">【题型】：{{questionType}}</el-col>
          <el-col :span="6">【编号】：{{currentDeatil.id}}</el-col>
          <el-col :span="6">【难度】：{{difficulty}}</el-col>
          <el-col :span="6">【标签】：{{currentDeatil.tags}}</el-col>
          <el-col :span="6">【学科】：{{currentDeatil.subjectName}}</el-col>
          <el-col :span="6">【目录】：{{currentDeatil.directoryName}}</el-col>
          <el-col :span="6">【方向】：{{currentDeatil.direction}}</el-col>
        </el-row>
        <hr>
            【题干】：<div style="color:blue" v-html="currentDeatil.question"></div>
            <div v-if="currentDeatil.questionType==='1'">
              <div>单选题选项：(以下选中的选项为正确答案)</div>
                 <div v-for="item in currentDeatil.options" :key="item.code" style="margin-top:15px">
                   <!-- label和value对应上才是被选中 -->
                    <el-radio :value="item.isRight" :label='1'>{{item.title}}</el-radio>
                 </div>
              </div>
            <!-- <div v-else-if="currentDeatil.questionType==='2'">
                <div>多选题选项：(以下选中的选项为正确答案)</div>
                 <div>
                      <el-checkbox  :value="item.isRight" :label='1'>{{item.title}}</el-checkbox>
                 </div>
            </div> -->
            <!-- 简答空 -->
            <div v-else></div>
             <hr>
             <el-row type="flex" justify="start" align="middle">
              <el-col :span="4" >【参考答案】：</el-col>
              <el-col :span="20">
                <el-button type="danger" size="small" @click="play">视频答案预览</el-button>
              </el-col>
            </el-row>
            <div style="margin-top:20px">
              <video v-if="audioShow" :src="currentDeatil.videoURL" controls="controls" width="300px" >
                您的浏览器不支持 video 标签。
                </video>
            </div>
            <hr>
             <el-row type="flex" justify="start" align="middle">
              <el-col :span="4" >【答案解析】：</el-col>
              <el-col :span="20">
                <span v-html="currentDeatil.answer"></span>
              </el-col>
            </el-row>
            <hr>
            <el-row type="flex" justify="start" align="middle">
             <el-col :span="4" >【题目备注】：</el-col>
             <el-col :span="20">
               <span v-html="currentDeatil.remarks"></span>
             </el-col>
            </el-row>
            <el-row  type="flex" justify="center" style="margin-top:30px">
              <el-button type="primary" @click="showDialog=false">关闭</el-button>
            </el-row>
    </el-dialog>
  </div>
</template>

<script>
import baseApi from '@/api/base/baseApi'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview4',
  props: {
    currentId: {
      required: true
    }
  },
  computed: {
    // 题目类型
    questionType () {
      return this.style.find(item => +item.id === +this.currentDeatil.questionType)?.value
    },
    difficulty () {
      return this.simples.find(item => +item.id === +this.currentDeatil.difficulty)?.value
    }
  },
  data () {
    return {
      // 题目类型(数组)
      style: baseApi.style,
      // 题目难度
      simples: baseApi.simples,
      // 是否显示视频
      audioShow: false,
      showDialog: false,
      currentDeatil: {}
    }
  },
  methods: {
    // 关闭弹窗
    close () {
      // console.log('111')
      this.audioShow = false
      this.currentDeatil = {}
    },
    // 视频显示
    play () {
      this.audioShow = true
    },
    async open () {
      try {
        const { data } = await detail({ id: this.currentId })
        this.currentDeatil = data
      } catch {
        return this.$message.error('接口问题')
      }
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='less'></style>
